<template>
	<view class="body">
		<view class="top">
			<view class="p1" :class="{active:i==1}" @tap="an(1)">
				新品
			</view>
			<view class="p1" :class="{active:i==2}" @tap="an(2)">
				销量
			</view>
			<view class="p1" :class="{active:i==3}" @tap="an(3)">
				价格
			</view>
			<view class="p1" :class="{active:i==4}" @tap="an(4)">
				筛选
			</view>
		</view>


		<!-- 产品展示 -->

		<view class="zhanshi">


			<view class="content" v-for="item in list" :key="item.id" @tap="jump(item.id)">
				<image :src="item.cover_img" mode=""></image>
				<view class="p1">
					{{item.gname}}
				</view>
				<view class="p2">
					<view class="p3">
						${{item.price_now}}
					</view>
					<view class="p3">
						{{item.origin_city}}
					</view>
				</view>
			</view>


		</view>


	</view> <!-- body -->
</template>

<script>
	import {
		list,
		detail
	} from "../../../util/kind/kind.js"
	export default {
		data() {
			return {
				valid: [],
				list: [],
				list2:[],
				i: 1,
			};
		},

		methods: {
			an(i) {
				this.i = i
				
				console.log(i)

				if (i == 3) {
					var list = this.list
					for (var j = 1; j < list.length; j++) {
				
						for (var k = 0; k < list.length - j; k++) {
					
							if (list[k].price_now < list[k + 1].price_now) {
						
								var temp = list[k];
								list[k] = list[k + 1];
								list[k + 1] = temp;
							}
						}
					}
					console.log(list);
					list=this.list2
				}

			},
			
			jump(val){
				uni.navigateTo({
					url:`./detail/detail?id=${val}`
				})
				
			}
			
			
		},

		async onLoad(val) {
			console.log(val)
			var res = await list({
				kindId: val.id
			})
			console.log(res)
			this.list = res.data.data.list
			
			
		


			uni.setNavigationBarTitle({
				title: '创意',

			});
			uni.setNavigationBarColor({

				frontColor: '#ffffff',
				backgroundColor: ' #354E44',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})


		}






	}
</script>

<style lang="scss" scoped>
	.body {

		background-color: #F1ECE7;
		width: 100%;
		height: 100%;

	}

	.top {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		height: 80rpx;
		background: #354E44;

		.p1 {
			font-size: 30rpx;
			color: #FFFFFF;
		}

		.active {
			color: red;
			border-bottom: 1px solid red;
		}

	}

	.zhanshi {
		width: calc(100%-80rpx);
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.content {



		width: 316rpx;
		height: 416rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top: 50rpx;

		image {
			width: 100%;
			height: 238rpx;
			border-radius: 10rpx;
		}

		.p1 {
			font-size: 26rpx;
			color: #3E3E3E;
			font-weight: bold;
			padding: 40rpx;
		}

		.p2 {
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;

			.p3 {
				font-size: 26rpx;
			}
		}
	}
</style>
